<template>
  <van-tabs v-model:active="activeName">
    <van-tab title="推荐" name="recommend">
      <VideoRecommend />
    </van-tab>
    <van-tab title="评论" name="comment">
      <comment-title :dataLength="lens" @Postcomment="PostSuccess" ref="commentIpt"  />
      <comment @lengthselect="(len: null) => lens = len" ref="commentPulish"  @publishClick="PostChildClick" />
    </van-tab>
  </van-tabs>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import VideoRecommend from './video-recommend.vue'
import VideoComment from './video-comment.vue'
import commentTitle from './commentTitle.vue'
import comment from './comment.vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
const activeName = ref('recommend')
const lens = null
const route = useRoute()
const commentPulishRef = ref()
const commentIpt = ref()
interface Postcom {
  CommentContent: string
  CommentDate: string
  ParentId: string | string[] | null
  ArticleId: string | string[] | null
}

const postcom = ref<Postcom>({
  CommentContent: '',
  CommentDate: '',
  ParentId: null,
  ArticleId: null
})

const PostSuccess = async (res) => {
  const date = new Date()
  let m = (date.getMonth() + 1)
  let d = date.getDate()
  if (m < 10) {
    m = Number('0' + m)
  }
  if (d < 10) {
    d = Number('0' + d)
  }
  const str = `${m}-${d}`
  postcom.value.CommentContent = res
  postcom.value.CommentDate = str
  postcom.value.ArticleId = route.params.id
  const result = await axios.post('http://localhost:3000/user/comment_post/' + localStorage.getItem('id'), postcom)
  if (commentPulishRef.value) {
    commentPulishRef.value.commentData()
  }
  postcom.value.ParentId = null
  if (result.status === 200) {
    alert('评论发表成功')
  }
}
const PostChildClick = (id: string) => {
  postcom.value.ArticleId = id
  if (commentIpt.value) {
    commentIpt.value.focusIpt()
  }
}

</script>
